<template>
	<view class="tenant-auth">
		<view class="auth-top">
			<u-upload :fileList="formData.ImageS" @afterRead="afterRead" @delete="deletePic" name="6" multiple
				:maxCount="1" width="250" height="150">
				<image :src="$imgUrl + '/services/photo-icon.png'" mode="aspectFit"
					class="auth-icon" style="width: 280rpx;height: 282rpx;"></image>
			</u-upload>
		</view>
		<view class="access-l-nav">
			<span class="span"></span>
			<view class="view">租客信息</view>
		</view>
		<view class="access-l-top">
			<view class="view">
				<view class="view-1">租客姓名：</view>
				<view class="view-2">{{ formData.memberName}}</view>
			</view>
			<view class="view">
				<view class="view-1">联系电话：</view>
				<view class="view-2">{{formData.phone}}</view>
			</view>
			<view class="view">
				<view class="view-1">证件号码：</view>
				<view class="view-2">{{formData.idNumber}}</view>
			</view>
			<view class="view">
				<view class="view-1">房源地址：</view>
				<view class="view-2">{{formData.address}}</view>
			</view>
		</view>
		<view class="submit-btn" @click="submit">提交授权</view>
	</view>
</template>
<script setup lang="ts">
	import { useStore } from "vuex"
	import {
		onMounted,
		reactive
	} from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import * as Upload from '@/utils/Upload.js'
	import * as API from '@/common/API/prohibit'
	const store = useStore()
	const formData = reactive({
		memberName: uni.getStorageSync('userInfo').nickname, //人员姓名
		idNumber: uni.getStorageSync('userInfo').cardNo, //身份证号
		memberType: '2', //人员类型
		phone: uni.getStorageSync('userInfo').mobile, //手机号
		uploadPath: '1', //上传途径
		renterId: uni.getStorageSync('userInfo').id, //关联承租人id
		renterName: uni.getStorageSync('userInfo').nickname, //关联承租人姓名
		renterPhone: uni.getStorageSync('userInfo').mobile, //关联承租人手机号
		operator: uni.getStorageSync('userInfo').nickname, //操作人
		ImageS: [],
		photoUrls: [], //人脸图片
		address: null
	})
	onLoad(()=>{
		getaddres()
	})
	const getaddres = async () => {
		const data = await API.getroomIds()
		let roomNames = ''
		data.forEach(item => {
			roomNames += item.roomName + ', ';
		})
		roomNames = roomNames.slice(0, -2);
		formData.address = roomNames
	}
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = formData.ImageS.length
		lists.map((item) => {
			formData.ImageS.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await Upload.uploadFilePromise(lists[i].url)
			formData.photoUrls.push(result.data.pathUrl)
			let item = formData.ImageS[fileListLen]
			formData.ImageS.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	}
	const deletePic = (event) => {
		formData.ImageS.splice(event.index, 1)
		formData.photoUrls.splice(event.index, 1)
	}
	const submit = async () => {
		if(formData.photoUrls.length == 0){
			uni.showToast({
				title: '请上传人像照片',
				icon: "none"
			});
			return
		}
		if (store.state.doorPassImg) {
			let photoUrl = formData.photoUrls.join(',')
			const { memberName, idNumber, phone } = formData
			let req = await API.faceedit({ memberName, idNumber, phone, photoUrl, id: uni.getStorageSync('userInfo').id })
			if(req){
				uni.navigateBack({
					delta: 1
				})
			}
		} else {
			let photoUrl = formData.photoUrls.join(',')
			let res = await API.createface({ ...formData, photoUrl })
			if(res){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
	onMounted(() => {
		if (store.state.doorPassImg) {
			formData.ImageS.push({ url: store.state.doorPassImg })
			formData.photoUrls.push(store.state.doorPassImg)
		}
	})
</script>
<style lang="scss" scoped>
	::v-deep .u-upload__wrap__preview {
		margin: 0 auto;
	}

	::v-deep .u-upload__wrap {
		margin: 0 auto;
	}

	.tenant-auth {
		.auth-top {
			padding: 60rpx 0;
			background: #fff;
			text-align: center;

			.auth-img {
				width: 280rpx;
				height: 282rpx;
				display: inline-block;
				margin: 0 auto;

				.auth-icon {
					width: 280rpx;
					height: 282rpx;
				}
			}
		}

		.access-l-nav {
			padding: 32rpx;
			display: flex;
			align-items: center;

			.view {
				display: inline-block;
			}

			.span {
				width: 8rpx;
				height: 28rpx;
				border-radius: 228rpx;
				display: inline-block;
				margin-right: 16rpx;
				background: rgba(253, 150, 24, 1);
			}
		}

		.access-l-top {
			padding: 32rpx;
			background: #fff;

			.view {
				display: flex;
				flex-direction: row;
				padding-bottom: 14rpx;

				.view-1{
					width: 140rpx;
					font-size: 28rpx;
					color: rgba(153, 153, 153, 1);
				}

				.view-2{
					flex: 1;
					color: rgba(77, 77, 77, 1);
					font-size: 28rpx;
					max-height: 151rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
			}
		}

		.submit-btn {
			margin: 40% 32rpx 0;
			width: 686rpx;
			height: 84rpx;
			border-radius: 200rpx;
			color: #fff;
			text-align: center;
			line-height: 84rpx;
			font-size: 32rpx;
			background: rgba(253, 150, 24, 1);
			// background: rgba(219, 219, 219, 1);
		}
	}
</style>